<template>
	<uv-upload
			:fileList="list"
			name="1"
			:accept="accept"
			:multiple="multiple"
			:maxCount="count"
			:previewFullImage="previewFullImage"
			:previewFullVideo="previewFullVideo"
			:width="width"
			:height="height"
			:disabled="disabled"
			@afterRead="afterRead" 
			@delete="deletePic" 
		></uv-upload>
</template>

<script setup>
import { reactive, computed, ref, defineEmits } from 'vue'
import { onUpload } from '@/api/common.js'

const emits = defineEmits(['value'])

const props = defineProps({
	fileList: {
		type: Array,
		default: () => []
	},
	count: {
		type: Number,
		default: 1
	},
	multiple: {
		type: Boolean,
		default: true
	},
	accept: {
		type: String,
		default: 'accept'
	},
	// 图片预览
	previewFullImage: {
		type: Boolean,
		default: true,
	},
	// 视频预览
	previewFullVideo: {
		type: Boolean,
		default: true
	},
	// 是否禁用
	disabled: {
		type: Boolean,
		default: false
	},
	width: {
		type: Number,
		default: 80
	},
	height: {
		type: Number,
		default: 80
	}
})

// 图片列表
const list = computed(() => {
	return props.fileList
})

// 删除图片
const deletePic = (e) => {
	let imgList = list.value;
	console.log(imgList)
	imgList.splice(e.index, 1)
	emits('value', imgList)
}

// 上传图片处理
const afterRead = async event => {
	let lists = [].concat(event.file)
	
	let imgList = []
	
	for (let item of lists) {
		const res = await onFile(item)
		imgList.push({
			url: res
		})
	}
	
	emits('value', [...list.value, ...imgList])
}

// 文件上传服务器
const onFile = file => {
	return new Promise((resolve, reject) => {
		Promise.try(async () => {
			return onUpload(file)
		}).then(res => {
			resolve(res.data)
		}).catch(err => {
			reject(false)
		})
	})
}
</script>

<style scoped lang="scss">

</style>